<template>
  <div>
    <el-dialog
      ref="refDlg"
      :title="formData.id ? '编辑' : '新增'"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600"
      @close="handleBack"
    >
      <div>
        <el-form ref="refForm" class="financeForm" :rules="formRules" :model="formData" size="mini" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="推荐型号:" size="mini" prop="recommendModel">
                <input-with-dialog
                  v-model="formData.recommendModel"
                  :props="{label:'name',value:'code'}"
                  :config="modelConfig"
                  @change="recommendModelChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="推荐品类:" size="mini" prop="recommendCategory">
                <input-with-dialog
                  v-model="formData.recommendCategory"
                  :props="{label:'name',value:'code'}"
                  :config="categoryConfig"
                  @change="reCategoryChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="推荐系列:" size="mini" prop="recommendSeriesName">
                <span>{{ formData.recommendSeriesName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="搭配型号:" size="mini" prop="modelArr">
                <input-with-dialog
                  v-model="formData.modelArr"
                  :props="{label:'name',value:'code'}"
                  :config="modelConfig"
                  @change="modelChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="搭配品类:" size="mini" prop="category">
                <input-with-dialog
                  v-model="formData.category"
                  :props="{label:'name',value:'code'}"
                  :config="categoryConfig"
                  @change="categoryChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="搭配系列:" size="mini" prop="seriesName">
                <span>{{ formData.seriesName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="搭配数量:" size="mini" prop="collocationNum">
                <el-input v-model="formData.collocationNum" type="number" size="mini" placeholder="请输入数量" min="1" @change="handelBlur" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="handleBack">取消</el-button>
        <el-button type="primary" size="mini" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getDictByPatchType } from '@/api/dataDict'
import { saveMatchRecommend, getMatchRecommend } from '@/api/basicData'
// import { getUserInfo } from '@/utils/auth'
// import fileUploader from '@/components/importFile'
// import { postConfigAttachmentTemplate, changeFileList } from '@/api/proConfig'
// import { getShopAttachment } from '@/api/decorate'
export default {
  name: 'EditDialog',
  // components: { fileUploader },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    const validateNum = (rule, value, callback) => {
      if (!value || value.length === 0) {
        return callback(new Error('请输入搭配数量'))
      } else {
        if (isNaN(Number(value)) || Number(value) < 1 || parseInt(value) !== Number(value) || Number(value) > 99) {
          return callback(new Error('请输入1~99的正整数'))
        }
      }
      callback()
    }
    return {
      enableList: [
        { dictName: '启用', dictCode: 1 },
        { dictName: '停用', dictCode: 0 }
      ],
      formData: {
        enable: 1
      },
      formRules: {
        recommendModel: [{ required: true, message: '请选择推荐型号' }],
        recommendCategory: [{ required: true, message: '请选择推荐品类' }],
        modelArr: [{ required: true, message: '请选择搭配型号' }],
        category: [{ required: true, message: '请选择搭配品类' }],
        collocationNum: [{ required: true, message: '请输入搭配数量' },
          { validator: validateNum, message: '请输入1~99的正整数' }]
      },
      modelConfig: {
        title: '型号',
        interfacePath: `/select-service/api/v1/productModel/page`,
        setting: [
          {
            prop: 'code',
            title: '编码'
          },
          {
            prop: 'name',
            title: '名称'
          }
        ]
      },
      categoryConfig: {
        title: '品类',
        interfacePath: `/select-service/api/v1/productCategory/page`,
        setting: [
          {
            prop: 'code',
            title: '编码'
          },
          {
            prop: 'name',
            title: '名称'
          }
        ]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    if (this.detailData.id) {
      getMatchRecommend(this.detailData.id).then(res => {
        if (res.success && res.data) {
          this.formData = res.data
          const recommendModel = [{ label: this.formData.recommendModelName, value: this.formData.recommendModelCode }]
          const recommendCategory = [{ label: this.formData.recommendCategoryName, value: this.formData.recommendCategoryCode }]
          const modelArr = [{ label: this.formData.modelName, value: this.formData.modelCode }]
          const category = [{ label: this.formData.categoryName, value: this.formData.categoryCode }]
          this.$set(this.formData, 'recommendModel', recommendModel)
          this.$set(this.formData, 'recommendCategory', recommendCategory)
          this.$set(this.formData, 'modelArr', modelArr)
          this.$set(this.formData, 'category', category)
        }
      })
    }
  },
  methods: {
    // 格式化数据
    formaterData(arr, dictCode) {
      if (!arr || !arr.length) return
      const tmpArr = arr.filter(item => item.dictCode === dictCode)
      if (tmpArr.length) {
        return tmpArr[0].dictName
      }
      return dictCode
    },
    // 修改数量
    handelBlur(row) {
      // const num = Number(row.productNumber)
      // if (isNaN(num) || num < 1 || (num % 1 !== 0)) {
      //   row.productNumber = 1
      //   this.$message.warning('请输入大于或等于1的整数')
      // }
    },
    // 选择推荐型号
    recommendModelChange(row) {
      this.formData.recommendModelCode = row[0].code
      this.formData.recommendModelName = row[0].name
      this.formData.recommendSeriesCode = row[0].radSeriesCode
      this.formData.recommendSeriesName = row[0].radSeriesName
    },
    // 选择推荐品类
    reCategoryChange(row) {
      this.formData.recommendCategoryCode = row[0].code
      this.formData.recommendCategoryName = row[0].name
    },
    // 选择搭配型号
    modelChange(row) {
      this.formData.modelCode = row[0].code
      this.formData.modelName = row[0].name
      this.formData.seriesCode = row[0].radSeriesCode
      this.formData.seriesName = row[0].radSeriesName
    },
    // 选择搭配品类
    categoryChange(row) {
      this.formData.categoryCode = row[0].code
      this.formData.categoryName = row[0].name
    },
    // 取消
    handleBack() {
      this.dialogShow = false
      this.clearForm()
    },
    // 清空表单
    clearForm(done) {
      this.formData = {}
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    // 提交
    submitForm() {
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          saveMatchRecommend(this.formData).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.dialogShow = false
              this.clearForm()
              const isNew = !this.formData.id
              this.$emit('success', isNew)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
